<template>
	<view class="flex-1 hb column hidden">
		<view class="esay-out2 bgf">
			<u-tabs @click="handleTabs" :list="tabs" lineWidth="40rpx" keyName="label" lineColor="#0759BB" :scrollable="false"
				lineHeight="3rpx" :activeStyle="{
						color: '#0759BB',
						fontWeight: 'bold',
						fontSize: '28rpx',
						transform: 'scale(1.05)'
					}" :inactiveStyle="{
						color: '#000000',
						fontSize: '28rpx',
						transform: 'scale(1)'
					}" />
		</view>
		<view class="flex-1 hb column hidden p30">
			<scroll-view class="hb" :scroll-y="true" :refresher-enabled="scrollViewTool.isEnabled"
				:refresher-triggered="scrollViewTool.triggered" refresher-background="rgba(0,0,0,0)"
				@refresherrefresh="pullDownRefresh" @refresherrestore="scrollViewTool.triggered = false" :upper-threshold="100"
				:lower-threshold="100" @refresherabort="triggered = false" @scrolltolower="reachBottom">
				<template v-if="listData.length>0">
					<view  v-for="(item,index) in listData" :key="item.id" class="esay-out3 bgf p30 radius30">
						<view class="item-ctn">
							<view class="top">
								<u-avatar :src="user.userInfo.head_img"
									size="82rpx"></u-avatar>
								<view class="center-box">
									<view class="nt">
										<text class="name">{{user.userInfo.nickname}}</text>
										<!-- <view class="tag tag-red">批发</view> -->
									</view>
									<view class="time">3天前</view>
								</view>
								<view class="align-center">
									<text class="base-color">{{statusText[item.apply_status].text}}</text>
									<u-line length="30rpx" color="#D1D1D1" margin="0 30rpx" direction="col" />
									<view class="delete"  @click="handleItem(item,item.apply_status,statusText[item.apply_status].btnText)">
										{{statusText[item.apply_status].btnText}}
									</view>
								</view>
							</view>
						</view>
						<view class="content">
							<view class="title">{{item.name}}</view>
							<view class="sub-title">
								{{item.refuse_reason}}
							</view>
						</view>
						<view class="justify-start align-center gap21 mt26">
							<u-image :src="v"
								width="200rpx" height="200rpx" radius="18rpx" v-for="v in [item.images]" :key="item"></u-image>
						</view>
						<view class="mt31 justify-between">
							<view class="center ml17">
								<image src="https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/home/loc-ic.png"
									style="width: 18rpx;height: 23rpx;"></image>
								<text class="base-color fs26 ml6">{{item.province}}</text>
							</view>
							<!-- <view class="funcs">
								<view class="func">
									<text class="base-color">查看评论</text>
									<u-icon name="arrow-up-fill" color="#0759BB" size="18rpx" />
								</view>
							</view> -->
						</view>
					</view>
					<u-loadmore :status="loadStatus" />
				</template>
				<view class="flex-1 hb centerV" v-else>
					<fr-empty-data />
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		savePhotos,
		navTo
	} from '@/core/app';
	import {
		useLoadPageList
	} from "@/hooks/useLoadPageList/useLoadPageList.js";
	import {
		getMyCarSource,carSell,carCancelSell
	} from "@/api/user/carSource";
	import {
		useCarHook
	} from './hooks/index';
	
	const {
		tabs,
		getMyCarSourceCountApi,handleCheckState
	} = useCarHook(2)
	import store from '@/store'
	const {
		user
	} = store.state
	const queryParams = ref({
		apply_status: 1, //0待审核 1通过 2拒绝 -1关闭
		keywords: '', //搜索
		type: 2, //1求购 2收购 3批发 4车源  0所有
	});

	const {
		listData,
		getListData,
		listDataDelay,
		loadStatus,
		scrollViewTool,
		reachBottom,
		pullDownRefresh,
		reSetList
	} =
	useLoadPageList(getMyCarSource, queryParams.value);
	
	onLoad(() => {
		getMyCarSourceCountApi(2,tabs.value)
		getListData()
		
	})

	
	//切换分类
	const handleTabs = (item) => {
		queryParams.value.apply_status = item.value
		reSetList()
	}
	 //0待审核 1通过 2拒绝 -1关闭
	 const statusText = {
		0:{text:'待审核',color:'base-price',btnText:'取消发布'},
		1:{text:'收购中',color:'base-color',btnText:'取消收购'},
		2:{text:'审核失败',color:'base-price',btnText:'重新提交'},
		'-1':{text:'已下架',color:'base-color',btnText:'上架'}
	  }
	//更改状态
	const handleItem = (item,status,btnText)=>{
		handleCheckState(item,status,btnText,()=>{
			reSetList()
			getMyCarSourceCountApi(2,tabs.value)
		})
	}
</script>

<style scoped lang="scss">
	.input-ctn {
		width: 100%;
		height: 73rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 2rpx solid #0759bb;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 0 16rpx;
		box-sizing: border-box;

		.input-css {
			font-weight: 400;
			font-size: 26rpx;
		}

		.holder {
			font-weight: 400;
			font-size: 26rpx;
			color: #bdbcba;
		}
	}

	.item-ctn {
		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.center-box {
				margin-left: 19rpx;
				flex: 1;

				.nt {
					width: 100%;
					font-weight: bold;
					font-size: 28rpx;
					color: #000000;
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.tag {
						width: 64rpx;
						height: 31rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-weight: bold;
						font-size: 22rpx;
						color: #FFFFFF;
						border-radius: 5rpx;
						margin-left: 8rpx;
					}

					.tag-red {
						background-color: #d74d35;
					}

					.tag-yellow {
						background-color: #f9d03c;
					}
				}

				.time {
					margin-top: 11rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #5B5B5B;
				}
			}

			.delete {
				width: 112rpx;
				height: 48rpx;
				background: #ECECEC;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 1rpx solid #ECECEC;
				font-weight: 400;
				font-size: 23rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}

	.content {
		padding: 0 7rpx;
		box-sizing: border-box;
		margin-top: 18rpx;

		.title {
			font-weight: bold;
			font-size: 30rpx;
			color: #000000;
		}

		.sub-title {
			margin-top: 13rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #000000;
		}
	}

	.funcs {
		display: flex;
		justify-content: flex-end;
		align-items: center;

		.func {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-weight: 400;
			font-size: 22rpx;
			color: #666666;
			margin-left: 54rpx;
			gap: 5rpx
		}
	}
</style>